<template>
	<div>
		<div class="note" :style ="note">  
			<div class="top_tab">
	      <span>会议详情</span>
	    </div>
			<div class="info">
				<div class="title">
					<span>{{MeetingDetails.name}}</span>
				</div>
				<div class="xm">
					<img src="@as/img/hongdong__qz@2x.png" alt="">
					<span>会议类型：</span><span class="col_1">{{MeetingDetails.classname}}</span>
				</div>
				<div class="xm">
					<img src="@as/img/hongdong_dt_yb@2x.png" alt="">
					<span>会议地址：</span><span class="col_1">{{MeetingDetails.address}}</span>
				</div>
				<div class="xm">
					<img src="@as/img/hongdong_xq_yb@2x.png" alt="">
					<span>开始时间：</span><span class="col_1">{{(MeetingDetails.start_time) | time}}</span>
				</div>
				<div class="xm">
					<img src="@as/img/hongdong_dt_jz@2x.png" alt="">
					<span>结束时间：</span><span class="col_1">{{(MeetingDetails.end_time) | time}}</span>
				</div>
			</div>
		</div>
		<div class="boxt">
			<div class="ms">
				<div class="title"> 
					<span>议题描述</span>
				</div>
				<p v-html="MeetingDetails.describe"></p>
				<!-- <p>呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵
					呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵
					呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵
					呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵
				呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵
				</p> -->
			</div>
			<div class="md">
				<div class="title">
					<div class="lf">
						<span>会议文件</span>
					</div>
				</div>
				<div class="wj">
					<div class="wjbox" v-for="(item,index) in MeetingDetails.accessory" :key="index">
						<img src="@as/img/dangwu_wode_fj@2x.png" alt="">
						<a :href="item.accessoryPath">{{item.accessoryName}}</a>
					</div>
				</div>
			</div>
			<!-- 确认报名 -->
			<!--1参会 2请假 3待定 报名状态-->
			<div class="btn">
				<div class="qj" @click="getState(sta2)" :class="{'disabled':nowDate>MeetingDetails.end_time||status==1||status==2}" >
					<span v-if="status!=2">请假</span>
					<span v-if="status==2"> 已请假</span>
					<!--{{MeetingDetails.end_time}}-->
				</div>
				<div class="ch" @click="getState(sta1)" :class="{'disabled':nowDate>MeetingDetails.end_time||status==1||status==2}">
					<span v-if="status!=1">确认参会</span>
					<span v-if="status==1">已参会</span>
				</div>
			</div>
		</div>
	
	</div>
</template>

<script>
	export default {
			data() {
				return {
				    nowDate:'',
					eid:'',
					sta1:1, //参会
					sta2:2, //请假
					MeetingDetails:{},
                    status:3,
					note: {
						backgroundImage: "url(" + require("@as/img/huodong_wode_hy@2x.png") + ")",
						backgroundRepeat: "no-repeat",
						backgroundSize: "100% ",
					},
				}
			},
			mounted() {
				this.nowDate = parseInt(new Date().getTime()/1000)
				console.log(this.nowDate)
			},
			methods: {
				// 会议详情
				async getMeetingDetails () {  
					let that = this;
					try {
						let params = {
							meeting_id:that.eid,
                            uid:JSON.parse(Cookies.get('user_71ydj')).id
						}
						const url = `/app/meeting/meetinginfo`
						let res = await that.$http.get(url, params)
						that.$progress.done()
						if (res.code === 200) {
							that.MeetingDetails = res.data;
							that.status = res.data.status;
						}
					} catch (e) {
						console.log('​catch -> e', e)
					}
				},
				// 参会状态
				async getState (num) {

				    if(this.status==1||this.status==2){
						return false
					}
                    // if(num==1||num==2){
                     //    this.$toast.error('会议已结束')
                     //    return false
					// }
				    if(this.nowDate>this.MeetingDetails.end_time){
						this.$toast.error('会议已结束')
						return false
					}

					let that = this;
					let status = num;
					try {
						let params = {
							meeting_id:that.eid,
							status:status,
							uid:JSON.parse(Cookies.get('user_71ydj')).id
						}
						const url = `/app/meeting/minutes_stutas`
						let res = await that.$http.post(url, params)
						that.$progress.done()
						if (res.code === 200) {
							this.$toast.success(res.msg);
							this.status =num;
						}else {
							this.$toast.error(res.msg);
						}
					} catch (e) {
						console.log('​catch -> e', e)
					}
				},
			},
			created(){
				this.eid = this.$route.query.id;
				this.getMeetingDetails()
			}
	}
</script>

<style scoped lang="scss">
  .note{
		width:100%;
		height:244.5px;
		position: relative;
		.top_tab {
			width:100%;
			height:50px;
			padding:0 15px;
			display: flex;
			justify-content: center;
			align-items: center;
			span {
				color: #fff;
				font-size: 18px;
				font-weight: bold;
			}

		}
		.info{
			width:100%;
			padding: 5px 15px;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			.title{
				width:100%;
				display: flex;
				justify-content: center;
				span{
					color: #FFF;
					font-size: 15px;
				}
			}
			.xm{
				width:100%;
				padding: 0 0 0 15px;
				display: flex;
				align-items: center;
				margin-top: 12px;
				img{
					width:11.5px;
					height:11.5px;
				}
				span{
					color: #FFF;
					font-size: 13px;
					margin-left: 5px;
				}
				.col_1{
					margin-left: 20px; 
				}
			}
		}
	}
	.boxt{
		width:100%;
		min-height:442.5px;
		background: #FFF;
		padding: 15px 0 15px 15px;
		position: absolute;
		top:220px;
		left:0;
		border-top-left-radius:25px;
		border-top-right-radius:25px;
		display: flex;
		flex-direction: column;
		.ms{
			width:100%;
			display: flex;
			flex-direction: column;
			.title{
				width:100%;
				padding: 0 0 8px 0;
				border-bottom: 1px solid #ccc;
				span{
					color:#333;
					font-size: 17px;
					font-weight: bold;
				}
			}
			p{
				font-size: 14px;
				color: #666;
				text-indent: 2em;
				margin-bottom: 48px;
				margin-top: 15px;
			}
		}
		.md{
			width:100%;
			display: flex;
			flex-direction: column;
			padding-bottom:60px;
			.title{
				width:100%;
				padding: 0 15px 8px 0;
				border-bottom: 1px solid #ccc;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.lf{
					span{
						color:#333;
						font-size: 17px;
						font-weight: bold;
					}
				}
				.rf{
					display: flex;
					align-items: center;
					margin-top: 10px;
					span{
						color: #999;
						font-size: 12px;
					}
					img{
						width:10px;
						height:8.5px;
						margin-left: 3px;
					}
				}
			}
			.wj{
				width:100%;
				padding: 15px 15px 0 0;
				box-sizing: border-box;
				margin-bottom: 48px;
				.wjbox{
					width:100%;
					display: flex;
					align-items: center;
					margin-bottom: 5px;
					img{
						width:17px;
						height:16.5px;
						margin-right: 5px;
					}
					a{
						text-decoration:none; 
						font-size: 14px;
						color: #666 !important;
						display: inline-block;
						line-height: 1.2;
						overflow: hidden;
						margin: 0;
						padding: 0;
						text-overflow:ellipsis;
						white-space: nowrap;
					}
				}
			}
		}
		.btn{
			width:100%;
			padding: 0 15px;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			align-items: center;
			position: absolute;
			right: 0;
			bottom: 15px;
			.qj{
				width:49%;
				height:45px;
				border-radius: 5px;
				display: flex;
				justify-content: center;
				align-items: center;
				background: #fde3da;
				&.disabled{
					background: #ccc !important;
					color: #333;
					span{
						color: #fff;
					}
				}
				span{
					font-size: 16px;
					color: #eb4d44;
				}
			}
			.ch{
				width:49%;
				height:45px;
				border-radius: 5px;
				display: flex;
				justify-content: center;
				align-items: center;
				background: #eb4d44;
				&.disabled{
					background: #ccc !important;
					color: #333;
					span{
						color: #fff;
					}
				}
				span{
					font-size: 16px;
					color: #FFF;
				}
			}
		}
	}

	
</style>